﻿<html>
<head>
	<title>MKDG - image algebra</title>
	<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
    <script type="text/javascript" src="js/classy.js"></script>
    <script type="text/javascript" src="js/math.min.js"></script>
    <script type="text/javascript" src="js/helpers.js"></script>
    <script type="text/javascript" src="js/ImageManipulator.js"></script>	
    <script type="text/javascript" src="js/formulas.js"></script>	
	<script type="text/javascript" src="js/mkdg.js"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.9.2.custom.min.css">
</head>
<body>
    <div id="PageWrapper">
        <div id="header">
            <h1>IMAGE ALGEBRA</h1>
        </div>
        <div id="tabs">
            <ul>
                <li><a href="#imageEditor">Edytor obrazu</a></li>
                <li><a href="#predefinedImages">Gotowe obrazy</a></li>
                <li><a href="#instructions">Instrukcje</a></li>
            </ul>
            <div id="imageEditor">
                <div id="imageContainer">
                    <h2>Oryginalny obraz</h2>
                    <div id="imageDiv">
                        <img id="image" />
                    </div>
                    <div id="inputDiv">
                        <input id="imageInput" type="file" />
                    </div>
                </div>
                <div id="editors">
                    <div id="modes">
                        <select id="modesList">
                            <option value="rgb">RGB</option>
                            <option value="gray">Odcienie szarosci</option>
                        </select>
                    </div>
                    <div id="sliders">
                        <p>Manipulacja RGB:</p>
                        <input id="R_checkbox" type="checkbox" value="true" />R<input id="R_range" type="range" value="100" /></br>
                        <input id="G_checkbox" type="checkbox" value="true" />G<input id="G_range" type="range" value="100" /></br>
                        <input id="B_checkbox" type="checkbox" value="true" />B<input id="B_range" type="range" value="100" /></br>
                    </div>
                    <div id="formulas">
                        <p>Formuły:</p>
                        <div id="formulasList"></div>
                        <textarea id="formula" ></textarea>
                        </br>
                        <input id="transformButton" type="button" value="Transformuj"/>
                    </div>
                </div>
                <div id="changedImageContainer">
                    <h2>Przetworzony obraz</h2>
                    <div id="changedImageDiv">
                        <canvas id="kanwa"></canvas>
                    </div>
                    <input id="saveButton" type="button" value="Zapisz do pliku"></input>
                    <input id="saveButtonTemp" type="button" value="Zapisz obraz"></input>
                </div>
            </div>
            <div id="predefinedImages">
                <img src="images/fish_min.jpg" id="img1" class="predefinedImg" onclick="loadPredefinedImage('images/fish.jpg');">
                <img src="images/squares_min.jpg" id="img2" class="predefinedImg" onclick="loadPredefinedImage('images/squares.jpg');">
                <img src="images/trees_min.jpg" id="img3" class="predefinedImg" onclick="loadPredefinedImage('images/trees.jpg');" />
                <img src="images/monkey_island_min.jpg" id="img3" class="predefinedImg" onclick="loadPredefinedImage('images/monkey_island.jpg');">
            </div>
            <div id="instructions">
                <h2>Wczytywanie obrazu</h2>
				<p>Aby wczytać obraz należy klknąć przycisk "Przeglądaj..." i wybrać plik obrazu z dysku.</p>
				<p>Wczytany obraz jest skalowany i wyświetlany po lewej stronie w głównej zakładce aplikacji ("Edytor obrazu").</p>
				<h2>Przetwarzanie obrazu</h2>
				<p>Wynik przetwarzania wyświetlany jest jako drugi obrazek po prawej stronie w zakładce "Edytor obrazu".</p>
				<p>Przetwarzanie może odbywać się w dwóch trybach: RGB i "Odcienie szarości".</p>
				<p>Obraz można przetwarzać poprzez zmianę udziału poszczególnych kanałów posługując się suwakami.</p>
				<p>Innym sposobem przetwarzania jest zastosowanine formuły, która przypożądkowuje wartości poszczególnym kanałom według zdefiniowanego wzoru.</p>
				<p>Aby przypisać wartość do kanału należy w oknie formuł wpisać oznaczenie kanału, znak równości oraz wzór zakończony średnikiem:</p>
				<p>R = sqrt(B) + log(G);</p>
				<p>W formułach można używać takich funkcji jak max, min oraz funkcji matematycznych (np. sqrt, log, cos, sin)</p>
				<h2>Przykładowe dane</h2>
				<p>Program zawiera przykładowe obrazy znajdujące się w zakładce "Gotowe obrazy".</p>
				<p>Można również użyć przy przetwarzaniu obrazu przykładowych formuł, które wybiera się z rozwijanej listy.</p>
				<h2>Zapisywanie obrazu</h2>
				<p>Przetworzony obraz można zapisać na dysku klikając przycisk "Zapisz do pliku".</p>
				<p>Aby zastąpić oryginalny, wczytany obraz obrazem przetworzonym i kontynuować przetwarzanie należy klknąć przycisk "Zapisz obraz".</p>
            </div>
        </div>
     </div>
    <div class="modal"><!-- Place at bottom of page --></div>
</body>
</html>